<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	
	<link rel="stylesheet" href="commonCSS/commonInitialize.css" />
	<!--页面完全加载好之前显示的加载动画效果-->
	<link rel="stylesheet" href="commonCSS/CSSLoadingAnimation01.css" type="text/css" />
	<link rel="stylesheet" href="commonCSS/commonDisplayFlex.css" />
	
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script type="text/javascript">
		window.addEventListener("resize", function() {
			//document.documentElement.style.fontSize = (window.innerWidth / 15) + "px";
			document.getElementsByTagName("html")[0].style.fontSize = (document.body.offsetWidth / 15) + "px";
			/*let width = window.innerWidth;
			if(width < 901) {
				document.getElementsByTagName("html")[0].style.fontSize = (document.body.offsetWidth / 15) + "px";
				return;
			}*/
			
		});
		window.addEventListener("DOMContentLoaded", function() {
			//document.documentElement.style.fontSize = (window.innerWidth / 15) + "px";
			document.getElementsByTagName("html")[0].style.fontSize = (document.body.offsetWidth / 15) + "px";
			
		});
	</script>
	
	
	<style type="text/css">
		body {
			width: 100%;
			max-width: 900px;
			min-width: 280px;
			height: 600px;
			/*background: 
			url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2928522244,2645512504&fm=26&gp=0.jpg)
			no-repeat,
			url(https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2489274049,2646677511&fm=26&gp=0.jpg)
			no-repeat right
			;*/
			margin: 0 auto;
		}
		
		
		img {
			width: 100%;
			height: auto;
		}
		
	</style>
	<script type="text/javascript">
		window.addEventListener("beforeunload", function() {
			document.getElementsByClassName("loading1")[0].style.display = "block";
		});
		window.addEventListener("load", function() {
			document.getElementsByClassName("loading1")[0].remove();
			/*整个网页加载好后（包括图片等），就移除这个动画元素，应该可以减少DOM树的分支*/
		});
		
	</script>
</head>
<body>
	<!--这个网页加载动画元素的div要放在body下面的第一个子元素的位置，因为是要在加载后面的所有元素之前运行动画的-->
	<div class="loading1">
		<div class="loading01">
			<div>加载中，稍等……<br />loading……</div>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<style type="text/css">
		header#header-area {
			width: 100%;
			height: 2.5rem;
			
			max-height: 100px;
			margin-bottom: 10px;
		}
		#header-div1 {
			position: fixed;
			left: 0;
			top: 0;
			z-index: 9999;
			width: 100%;
			min-width: 280px;
			height: 2.5rem;
			max-height: 80px;
			box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
			background: white;	
			
		}
		#header-div1 > div {
			width: 100%;
			max-width: 900px;
			min-width: 280px;
			height: 2rem;
			max-height: 50px;
			box-sizing: border-box;
			text-align: center;
		}
		#header-div1 > div > div {
			position: relative;
		}
		
		
		/*第一个，存储多个li的div*/
		#header-left-list, #header-register-login {
			width: 2rem;
			max-width: 50px;
			height: 100%;
			cursor: pointer;
		}
		#header-left-list ul, #header-register-login ul {
			position: absolute;
			top: 100%;
			/*left: 0;*/
			/*z-index: -1;*/
			visibility: hidden;
			opacity: 0;
			transition: all 0.3s;
			box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.2);
			background: white;
			border-radius: 0.2rem;
		}
		#header-left-list ul.display-flex {
			width: 6rem;
			height: auto;
			
		}
		#header-left-list ul.display-flex li {
			width: 50%;
			padding: 0.2rem 0.1rem;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: left;
		}
		#header-left-list ul.display-flex li:hover a {
			color: white;
			
		}
		#header-left-list ul.display-flex li:hover {
			background: #00BFFF;
		}
		#header-left-list i.fa, #header-register-login img {
			width: 100%;
			height: 100%;	
		}
		
		#header-left-list:hover > ul, #header-register-login:hover >ul {
			/*z-index: 10;*/
			opacity: 1;
			visibility: visible;
		}
		#header-register-login >ul { 
			width: 100%;
			right: 0;
			/*padding: 0.5rem 0.5rem;*/
			padding: 0.2rem;
			
		}
		#header-register-login i.fa { 
			font-size: 0.8rem;
			line-height: 2;
			
		}
		#header-left-list a, #header-register-login a {
			color: #00BFFF;
		}
		#header-center-search {
			cursor: pointer;
			flex: 1;
			margin: 0 0.4rem;
			min-width: 100px;
			height: 100%;
			box-sizing: border-box;
			
		}
		input, button {
			outline: none;
			border: none;
			
		}
		#header-center-search {
			border-radius: 1rem;
			overflow: hidden;
			
			
		}
		#header-center-search >input {
			/*flex: 1;*/
			width: 80%;
			height: 100%;
			padding: 0.15rem;
			box-sizing: border-box;
			font-size: 150%;
			border: 0.04rem solid #00BFFF;
			border-radius: 1rem 0 0 1rem;
		}
		#header-center-search > button {
			height: 100%;
			width: 20%;
			min-width: 50px;
			background: #00BFFF;
			color: white;
			font-family: 0.5rem;
			border-radius: 0 1rem 1rem 0;
		}
		
	</style>
	<header id="header-area">
		
		<div id="header-div1" class="display-flex flex-direction-column flex-justify-center flex-align-items-center">
			<div class="display-flex flex-justify-space-between flex-align-items-start">
				<!--第一个，存储多个li的div-->
				<div id="header-left-list">
					<img src="img/展开.png" alt="" />
					<ul class="display-flex flex-wrap flex-justify-center flex-align-content-start flex-align-items-start">
						<li><a href=""><strong>共青团</strong></a></li>
						<li><a href=""><strong>青年之声</strong></a></li>
						<li><a href=""><strong>军事</strong></a></li>
						<li><a href=""><strong>体育</strong></a></li>
						<li><a href=""><strong>专题</strong></a></li>
						<li><a href=""><strong>教育</strong></a></li>
						<li><a href=""><strong>中青校园</strong></a></li>
						<li><a href=""><strong>文化</strong></a></li>
						<li><a href=""><strong>读书</strong></a></li>
						<li><a href=""><strong>大学生村官</strong></a></li>
						<li><a href=""><strong>财经</strong></a></li>
						<li><a href=""><strong>科技</strong></a></li>
						<li><a href=""><strong>发现</strong></a></li>
						<li><a href=""><strong>娱乐</strong></a></li>
						<li><a href=""><strong>地方新闻</strong></a></li>
						<li><a href=""><strong>公益</strong></a></li>
						<li><a href=""><strong>创业</strong></a></li>
						<li><a href=""><strong>三下乡</strong></a></li>
						<li><a href=""><strong>旅游</strong></a></li>
						<li><a href=""><strong>游戏</strong></a></li>
						<li><a href=""><strong>汽车</strong></a></li>
					</ul>
				</div>
				<!--第二个，存储搜索框的div-->
				<div id="header-center-search" class="display-flex flex-justify-space-between flex-align-items-start">
					<input type="text"  />
					<button type="button">搜索</button>
				</div>				
				<!--第三个，存储登录、注册头像-->
				<div id="header-register-login">
					<img src="img/个人中心.png" alt="" />
					<ul>
						<li>
							<a href="javascript:;">
								<i class="fa fa-address-card"></i>
								<br />
								<strong>登  录</strong>
							</a>
						</li>
						<li>
							<a href="javascript:;">
								<i class=" 	fa fa-hand-o-right"></i>
								<br />
								<strong>注  册</strong>
							</a>
						</li>
					</ul>
				</div>
				
			</div>
		</div>
	</header>
	<style type="text/css">
		body {
			width: 100%;
			max-width: 900px;
			min-width: 280px;
			margin: 0 auto;
			font-size: 14px;
			box-sizing: border-box;
			
		}
		nav#nav-area {
			font-size: 0.34rem;
			width: 100%;
			height: auto;
			/*background: #CCCCCC;*/
			padding: 0.2rem;
			box-sizing: border-box;
			text-align: center;
		}
		#nav-carousel-div1 {
			width: 100%;
			height: auto;
			box-shadow: 0px 0px 28px rgba(0, 0, 0, 0.2);
			padding: 0.3rem 0;
		}
		.nav-carousel-ul {
			width: 100%;
			position: relative;
			height: auto;
			
		}
		.nav-carousel-ul > li {
			float: left;
			/*width: 33%;*/
			
		}
		@media screen and (min-width: 0px) {
			.nav-carousel-ul > li {
				width: 50%;
				
			}
			#nav-three-column > a {
				width: 100%;
			}
		}
		@media screen and (min-width: 414px) {
			.nav-carousel-ul > li {
				width: 33%;
				
			}
			#nav-three-column > a {
				width: 32%;
			}
		}
		.nav-carousel-ul >li > a img {
			display: block;
			width: 70%;
			height: auto;
			margin: 0 auto;
			border-radius: 0.2rem;
			box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.2);
		}
		.nav-carousel-ul > li > a > div:nth-of-type(2) {
			padding: 0.5rem 0.1rem;
			height: auto;
			
			text-align: center;
		}
		#nav-three-column {
			width: 100%;
			box-sizing: border-box;
			background: rgba(150, 150, 150, 0.1);
		}
		#nav-three-column > a {
			display: block;
			/*flex: 1;
			width: 30%;*/
			overflow: hidden;
			
		}
		#nav-three-column > a img {
			display: block;
			width: 100%;
			height: auto;
			padding: 0.5rem 0;
		}
		.strong-title strong {
			font-family: monospace;
			line-height: 2rem;
			font-size: 0.6rem;
			color: #00BFFF;
		}
		#img-title {
			box-sizing: border-box;
			padding: 0.2rem;
			background: rgba(245, 243, 244, 1);
		}
		#img-title img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 0.2rem;
			box-shadow: 0px 0px 18px rgba(47, 160, 70, 0.2);
			
		}
	</style>
	<!--nav 区域开始 start-->
	<nav id="nav-area">
		<div id="img-title">
			<a href="http://qnzs.youth.cn/"><img src="img123/abc.png"></a>
		</div>
		<style type="text/css">
			#latest-news-focus {
				width: 100%;
				height: 5rem;
				margin: 0 auto;
				box-sizing: border-box;
				padding: 0.2rem;
				background: rgba(245, 243, 244, 1);
			}
			#latest-news-focus > div {
				box-sizing: border-box;
				height: 100%;
			}
			#latest-news-focus .focus-img {
				width: 50%;
				overflow: hidden;
				
			}
			.focus-img >div.display-flex {
				width: 500%;
				height: 100%;
				position: relative;
				left: 0;
				
			}
			.focus-img >div.display-flex >a {
				width: 20%;
				height: auto;
				overflow: hidden;
				position: relative;
				
			}
			.focus-img >div.display-flex >a .recommend-img {
				position: absolute;
				top: 0;
				left: 0;
				height: 1rem;
				width: auto;
				
			}
			.focus-img >div.display-flex img {
				width: 100%;
				height: 100%;
				display: block;
				
			}
			#latest-news-focus .focus-text {
				width: 50%;
				height: 100%;
				/*padding: 0.1rem;*/
				overflow: hidden;
			}
			
			.focus-text >div {
				width: 100%;
				height: 0.6rem;
				font-size: 0.25rem;
				line-height: 0.2rem;
				
				box-sizing: border-box;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				
			}
			.focus-text >div a {
				display: block;
				width: 100%;
				height: 100%;
				padding: 0.2rem;
			}
		</style>
		<div id="latest-news-focus" class="display-flex flex-wrap flex-justify-space-around flex-align-items-center">
			<div class="focus-img">
				<div class="display-flex flex-justify-space-around flex-align-items-center">
					<a href="">
						<img src="https://t.m.youth.cn/magicimg/v.youth.cn/yw/202102/W020210221558355897591.png?resize=w_260,h_150" alt="" />
						<img class="recommend-img" src="http://www.youth.cn/images/20190918youthtj.png">
					</a>
					<a href="">
						<img src="https://t.m.youth.cn/magicimg/v.youth.cn/yw/202102/W020210221558355897591.png?resize=w_260,h_150" alt="" />
					</a>
					<a href="">
						<img src="https://t.m.youth.cn/magicimg/v.youth.cn/yw/202102/W020210221558355897591.png?resize=w_260,h_150" alt="" />
					</a>
					<a href="">
						<img src="https://t.m.youth.cn/magicimg/v.youth.cn/yw/202102/W020210221558355897591.png?resize=w_260,h_150" alt="" />
					</a>
					<a href="">
						<img src="https://t.m.youth.cn/magicimg/v.youth.cn/yw/202102/W020210221558355897591.png?resize=w_260,h_150" alt="" />
					</a>
				</div>
			</div>
			<div class="focus-text display-flex flex-direction-column flex-justify-space-around flex-align-items-center">
				<div>
					<a href="">
						实拍春雪下的箭扣长城
					</a>
				</div>
				<div>
					<a href="">
						多视角看“毅力号”着陆火星画面
					</a>
				</div>
				<div>
					<a href="">
						诋毁卫国戍边英雄，网民辣笔小球被刑拘
					</a>
				</div>
				<div>
					<a href="">
						陈祥榕烈士安葬现场公开
					</a>
				</div>
				<div>
					<a href="">
						搜救犬：抢险救援特殊的搭档
					</a>
				</div>
			</div>
		</div>
		<div class="strong-title">
			<a href="javascript:;"><strong>学习 · </strong></a>
			<a href="javascript:;"><strong>竞赛 · </strong></a>
			<a href="javascript:;"><strong>征文 · </strong></a>
			<a href="javascript:;"><strong>团圆 · </strong></a>
			<a href="javascript:;"><strong>年味</strong></a>
		</div>
		<div id="nav-carousel-div1">
			<ul class="nav-carousel-ul display-flex flex-wrap flex-justify-center align-items-center">
				<li>
					<a href="">
						<div><img src="https://t.m.youth.cn/magicimg/news.youth.cn/gn/202101/W020210118745473000358.jpg" /></div>
						<div>中国人的故事 | 有爱，在哪里都是团圆</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<img src="https://t.m.youth.cn/magicimg/www.youth.cn/kgl/202102/W020210214383206843924.jpg" alt="" />
						</div>
						<div>有爱就是团圆</div>
					</a>
				</li>
				
				<li>
					<a href="">
						<div>
							<img src="https://t.m.youth.cn/magicimg/news.youth.cn/gn/202101/W020210121549657129180.png" alt="" />
						</div>
						<div>哐切哐切哐切哐切哐切哐切...... |中国好青年</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<img src="https://t.m.youth.cn/magicimg/www.youth.cn/kgl/202102/W020210211450252988442.jpg" alt="" />
						</div>
						<div>青少年文化精品征集推荐活动</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<img src="https://t.m.youth.cn/magicimg/www.youth.cn/kgl/202101/W020210114650921369692.png" alt="" />
						</div>
						<div>“青年大学习”：人类历史上的伟大壮举</div>
					</a>
				</li>
				<li>
					<a href="">
						<div>
							<img src="https://t.m.youth.cn/magicimg/www.youth.cn/kgl/202102/W020210211449149388030.jpg" alt="" />
						</div>
						<div>一场最具年味儿的“春节盛宴”</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="strong-title">
			<a href="javascript:;"><strong>送温暖 · </strong></a>
			<a href="javascript:;"><strong>新征程 · </strong></a>
			<a href="javascript:;"><strong>文物展</strong></a>
		</div>
		<div id="nav-three-column" class="display-flex flex-wrap flex-justify-space-between flex-align-items-center">
			<a href=""><img src="https://t.m.youth.cn/magicimg/www.youth.cn/gqt/gqttp/202102/W020210217370416112472.jpg" alt="" /></a>
			<a href=""><img src="https://t.m.youth.cn/magicimg/news.youth.cn/rdzt/202101/W020210119399038133597.jpg" alt="" /></a>
			<a href=""><img src="https://t.m.youth.cn/magicimg/wenhua.youth.cn/whyw/202102/W020210217371535044366.jpg" alt="" /></a>
		</div>
	</nav>
	<section id="section-area">
		<style type="text/css">
			#passages-and-news-area {
				width: 100%;
				margin: 0 auto;
				font-size: 0.34rem;
				
			}
			
			.one-of-passages-and-news-div {
				
				
				box-sizing: border-box;
				overflow: hidden;
				margin: 0.4rem 0.1rem;
			}
			@media screen and (min-width: 0px) {
				.one-of-passages-and-news-div {
					width: 100%;
					
				}
				
			}
			@media screen and (min-width: 414px) {
				.one-of-passages-and-news-div {
					width: 48%;
					
				}
				
			}
			@media screen and (min-width: 750px) {
				.one-of-passages-and-news-div {
					width: 32%;
					
				}
				
			}
			.div-nav-bar {
				/*padding: 0.4rem 0.2rem;*/
				border-bottom: 0.1rem solid #008CFF;
				margin-bottom: 0.4rem;
				margin-left: 0.2rem;
			}
			.div-nav-bar > div {
				line-height: 2;
				width: 50%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
			.first-nav-bar > a, .second-nav-bar > a {
				width: 70%;
				/*min-width: 120px;*/
				display: inline-block;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.first-nav-bar > a.add-more-news, .second-nav-bar > a.add-more-news {
				/*padding-right: 1rem;*/
				width: 30%;
				min-width: 20px;
				text-align: center;
			}
			
			.div-nav-bar a {
				color: #00BFFF;
				
			}
			a.add-more-news > span {
				
				color: #008CFF;
				font-size: 0.4rem;
				transition: all 0.3s;
				display: inline-block;
			}
			a.add-more-news:hover > span {
				transform: rotate(180deg);
			}
			
			.passages-and-news-bar {
				width: 200%;
				height: auto;
				line-height: 2;
				font-size: 0.3rem;
				position: relative;
				left: 0;
				transition: all 0.5s;
			}
			
			.passages-and-news-bar .passages-and-news-ul {
				width: 50%;
				box-sizing: border-box;
				
			}
			.passages-and-news-ul > li {
				
				padding: 0.16rem 0.1rem;
				margin-top: 0.04rem;
				background: rgba(0, 190, 255, 0.1);
				border-radius: 0.2rem;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			
			.passages-and-news-ul > li:nth-of-type(1) img {
				width: 100%;
				height: auto;
				
				transition: all 0.3s;
				vertical-align: middle;
				display: block;
			}
			.passages-and-news-ul > li {
				
			}
			.passages-and-news-ul > li a {
				color: #00BFFF;
			}
			.passages-and-news-ul > li a:hover {
				text-decoration: underline;
				color: forestgreen;
				
			}
			.passages-and-news-ul > li:nth-of-type(1) a:hover > img {
				transform: scale(1.2);
			}
		</style>
		<div id="passages-and-news-area" class="display-flex flex-wrap flex-justify-start flex-align-items-start flex-align-content-start">
			<div id="communisist-youth-and-adolescent" class="one-of-passages-and-news-div">
				<div class="div-nav-bar display-flex flex-justify-space-between flex-align-items-start">
					<div class="first-nav-bar" data-sub-index="0">
						<a href="javascript:;"><strong>共青团</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					<div class="second-nav-bar" data-sub-index="1">
						<a href="javascript:;"><strong>青年之123声</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					
				</div>
				<div class="passages-and-news-bar display-flex flex-justify-center flex-align-items-start">
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/www.youth.cn/gqt/gqttp/202102/W020210218379873501018.jpg" alt="" />
							</a>
						</li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
					</ul>
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/www.youth.cn/qclz/pic/202102/W020210218374412295603.jpg" alt="" />
							</a>
						</li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
					</ul>
				</div>
			</div>
			<div class="one-of-passages-and-news-div">
				<div class="div-nav-bar display-flex flex-justify-space-between flex-align-items-start">
					<div class="first-nav-bar" data-sub-index="0">
						<a href="javascript:;"><strong>军事</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					<div class="second-nav-bar" data-sub-index="1">
						<a href="javascript:;"><strong>体育</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					
				</div>
				<div class="passages-and-news-bar display-flex flex-justify-center flex-align-items-start">
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/news.youth.cn/jsxw/202102/W020210218338514349358.jpg" alt="" />
							</a>
						</li>
						<li><a href="">阿富汗军方从塔利班据点解救24人</a></li>
						<li><a href="">30国防长讨论应对“中俄威胁”？！</a></li>
						<li><a href="">俄副外长：俄罗斯或转向遏制美国的政策</a></li>
						<li><a href="">伊朗总统表达与国际原子能机构合作意愿</a></li>
					</ul>
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/news.youth.cn/zc/202102/W020210218331791411015.png" alt="" />
							</a>
						</li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
					</ul>
				</div>
			</div>
			<div class="one-of-passages-and-news-div">
				<div class="div-nav-bar display-flex flex-justify-space-between flex-align-items-start">
					<div class="first-nav-bar" data-sub-index="0">
						<a href="javascript:;"><strong>教育</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					<div class="second-nav-bar" data-sub-index="1">
						<a href="javascript:;"><strong>中青校园</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					
				</div>
				<div class="passages-and-news-bar display-flex flex-justify-center flex-align-items-start">
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/edu.youth.cn/wzlb/202102/W020210209570921339210.jpeg" alt="" />
							</a>
						</li>
						<li><a href="">留校西藏学生的别样除夕</a></li>
						<li><a href="">牛！95后大学生用脑电波写福字</a></li>
						<li><a href="">谁的“中国科大”</a></li>
						<li><a href="">“套号学历”钻了什么空子</a></li>
					</ul>
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/www.youth.cn/zqxy/tp/202011/W020201207519261816363.jpg" alt="" />
							</a>
						</li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
					</ul>
				</div>
			</div>
			<div id="communisist-youth-and-adolescent" class="one-of-passages-and-news-div">
				<div class="div-nav-bar display-flex flex-justify-space-between flex-align-items-start">
					<div class="first-nav-bar" data-sub-index="0">
						<a href="javascript:;"><strong>文化</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					<div class="second-nav-bar" data-sub-index="1">
						<a href="javascript:;"><strong>读书</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					
				</div>
				<div class="passages-and-news-bar display-flex flex-justify-center flex-align-items-start">
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/wenhua.youth.cn/whyw/202102/W020210218463816012750.jpg" alt="" />
							</a>
						</li>
						


						<li><a href="">年画里的神仙变萌了</a></li>
						<li><a href="">“这一届”年味儿有点儿时尚</a></li>
						<li><a href="">甘肃省博物馆牛年“耕”牛：民众不再游客式“打卡”</a></li>
						<li><a href="">2021中国电影春节档：不断刷新票房，观众感慨一票难</a></li>
					</ul>
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/book.youth.cn/zx/202102/W020210218575477241439.jpg" alt="" />
							</a>
						</li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
					</ul>
				</div>
			</div>
			<div id="communisist-youth-and-adolescent" class="one-of-passages-and-news-div">
				<div class="div-nav-bar display-flex flex-justify-space-between flex-align-items-start">
					<div class="first-nav-bar" data-sub-index="0">
						<a href="javascript:;"><strong>文化</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					<div class="second-nav-bar" data-sub-index="1">
						<a href="javascript:;"><strong>读书</strong></a>
						<a href="javascript:;" class="add-more-news"><span>&plus;</span></a>
					</div>
					
				</div>
				<div class="passages-and-news-bar display-flex flex-justify-center flex-align-items-start">
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/wenhua.youth.cn/whyw/202102/W020210218463816012750.jpg" alt="" />
							</a>
						</li>
						


						<li><a href="">年画里的神仙变萌了</a></li>
						<li><a href="">“这一届”年味儿有点儿时尚</a></li>
						<li><a href="">甘肃省博物馆牛年“耕”牛：民众不再游客式“打卡”</a></li>
						<li><a href="">2021中国电影春节档：不断刷新票房，观众感慨一票难</a></li>
					</ul>
					<ul class="passages-and-news-ul">
						<li>
							<a href="">
								<img src="https://t.m.youth.cn/magicimg/book.youth.cn/zx/202102/W020210218575477241439.jpg" alt="" />
							</a>
						</li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
						<li><a href="">东京奥运防疫手册4月将更新 加入比赛项目防疫细则</a></li>
					</ul>
				</div>
			</div>
			
		</div>
		<style type="text/css">
			section#section-area {
				margin: 0 auto;
			}
			#recommend-div {
				width: 100%;
			}
			/*@media screen and (min-width: 0px) {
				#recommend-div {
					width: 100%;
				}
			}
			@media screen and (min-width: 750px) {
				#recommend-div {
					width: 70%;
				}
			}*/
			#recommend-div > div {
				box-sizing: border-box;
				
			}
			/*网络春晚的消息的div盒子*/
			#surf-net-party {
				position: relative;
				/*height: auto;*/
				width: 33%;
				height: 3rem;
				text-align: center;
			}
			#surf-net-party > div:nth-of-type(1) {
				position: relative;
				width: auto;
				height: 100%;
				
			}
			#surf-net-party > div:nth-of-type(1) img:nth-of-type(1) {
				position: relative;
				width: 100%;
				height: auto;
				display: block;
				
			}
			#surf-net-party > div:nth-of-type(1) img:nth-of-type(2) {
				position: absolute;
				left: -10%;
				width: 3rem;
				/*max-width: 250px;*/
				height: auto;
				
				
			}
			#surf-net-party > div:nth-of-type(2) {
				position: absolute;
				bottom: 0;
				left: 0;
				height: auto;
				width: 100%;
				font-size: 0.3rem;
				line-height: 2;
				background: rgba(0, 255, 190, 0.5);
				
			}
			#surf-net-party > div:nth-of-type(2) a {
				color: white;
			}
			
			#place-advertisements {
				
			}
			#recommend-div > div:nth-of-type(2) {
				width: 66%;
				height: 100%;
				
				
			}
			#recommend-div > div:nth-of-type(2) ul li {
				white-space: nowrap;
				text-overflow: ellipsis;
				/*width: 100%;*/
				overflow: hidden;
				/*line-height: 2;*/
				box-sizing: border-box;
				padding: 0.1rem;
				flex: 1;
				width: 100%;
				
			}
		</style>
		<div id="recommend-div" class="display-flex flex-justify-space-around align-items-center">
			<div id="surf-net-party">
				<div>
					<a href="">
						<img src="https://t.m.youth.cn/magicimg/v.youth.cn/yw/202102/W020210216393705718136.jpg" alt="" />
						<img src="./images/20190918youthtj.png" alt="" />
					</a>
				</div>
				<div>
					<a href="">第八届中国青少年网络春晚</a>
				</div>
			</div>
			<div>
				<ul class="display-flex flex-direction-column flex-align-content-space-around">
					 <li><i class="fa fa-cube"></i><a href=""> 搜救犬：抢险救援特殊的搭档</a></li>
					<li><i class="fa fa-cube"></i><a href=""> 点亮奉节定位标 为奉节助力</a></li>
					<li><i class="fa fa-cube"></i><a href=""> 辽宁铁路冻害增加 线路工人及时排除隐患</a></li>
					<li><i class="fa fa-cube"></i><a href=""> 现场！天问一号完成“侧手翻”</a></li>
					<li><i class="fa fa-cube"></i><a href="">第二批中国新冠疫苗抵达秘鲁</a></li>
				</ul>
			</div>
			<!--<div id="place-advertisements">
				<ul class="display-flex flex-justify-center align-items-center">
					<li><a href=""><img src="" alt="" />123</a></li>
					<li><a href=""><img src="" alt="" />123</a></li>
					<li><a href=""><img src="" alt="" />123</a></li>
					<li><a href=""><img src="" alt="" />123</a></li>
					<li><a href=""><img src="" alt="" />123</a></li>
				</ul>
			</div>-->
		</div>
	</section>
	<footer id="footer-area">
		<style type="text/css">
			#toTop {
				position: fixed;
				right: 10px;
				top: 40%;
				
				background: orange;
				
				text-align: center;
				
				transition: all 0.3s;
				visibility: hidden;
				opacity: 0;
				z-index: -1;
			}
			#toTop button {
				color: white;
				width: 100%;
				height: 100%;
				outline: none;
				border: none;
				cursor: pointer;
				background: transparent;
				width: 1.4rem;
				height: 1.4rem;
				box-sizing: border-box;
				font-size: 0.3rem;
				border-radius: 50%;
			}
			.showToTop {
				visibility: visible!important;
				opacity: 1!important;
				z-index: 9999!important;
			}
		</style>
		<div id="toTop">
			<button type="button">
				回到
				<br />顶部
			</button>
		</div>
		
	</footer>
	
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		// 原生JavaScript的点击事件：点击后进行ul列表轮播
		let divNavBar01 = document.getElementsByClassName("first-nav-bar");
		let divNavBar02 = document.getElementsByClassName("second-nav-bar");
		clickMoveLeft(divNavBar01);
		clickMoveLeft(divNavBar02);
		function clickMoveLeft(obj, leftMove = true) {
			let resize01 = null, resize02 = null;
			if(obj && obj.length !== undefined && obj.length > 1) {
				let len = obj.length;
				//let nextBrother, leftMove01, subIndex;
				for(let i = 0; i < len; i++) {
					obj[i].addEventListener("click", resize01 = function() {
						let nextBrother = this.parentElement.nextElementSibling || this.parentElement.nextSibling;
						let subIndex = parseInt(this.dataset["subIndex"]);
						let leftMove01 = (nextBrother.offsetWidth / nextBrother.children.length) * subIndex;
						nextBrother.style.left = (-leftMove01) + "px";
						console.dir(this.dataset["subIndex"]);
						let navLen = this.parentElement.children.length;
						for(let j = 0; j < navLen; j++) {
							this.parentElement.children[j].getElementsByTagName("a")[0].style.background = "";
							this.parentElement.children[j].getElementsByTagName("a")[0].style.color = "";
						}
						this.getElementsByTagName("a")[0].style.background = "#32cd32";
						this.getElementsByTagName("a")[0].style.color = "white";
						return;
					});
					
				}
				window.addEventListener("resize", function() {
					for(let i = 0; i < len; i++) {
						obj[i].parentElement.children[0].click();
						
					}
					resize01();
				});
				window.addEventListener("DOMContentLoaded", function() {
					for(let i = 0; i < len; i++) {
						obj[i].parentElement.children[0].click();
						
					}
					resize01();
				});
				return;
			}
			
			
			
		}
		// 点击回到顶部
		let toTop = document.getElementById("toTop");
		toTop.addEventListener("click", function() {
			clearInterval(this.set);
			let _this = this;
			let scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
			if(scrolltop > 0) {
				this.set = null;
				let tenth = scrolltop / 20;
				this.set = setInterval(function() {
					
					document.documentElement.scrollTop -= tenth;
					scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
					if(scrolltop <= 0) {
						clearInterval(_this.set);
						_this.set = null;
						return;
					}
					scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
					tenth = scrolltop / 20;
				}, 20);
				document.addEventListener("wheel" || "mousewheel", function(e) {
					clearInterval(_this.set);
					_this.set = null;
					return;
				}); // 按空格键时会出现一点bug，就是相对于多次点击回到顶部按钮，不太好
			}
			
		});
		window.addEventListener("scroll", function() {
			let scrolltop = document.body.scrollTop || document.documentElement.scrollTop;
			if(scrolltop > 300) {
				toTop.classList.add("showToTop");
				toTop.children[0].disabled = "";
				return;
			}
			toTop.children[0].disabled = "disabled";
			toTop.classList.remove("showToTop");
		});
		
	</script>
	<style type="text/css">
		body {
			height: 50000px;
		}
	</style>
</body>
</html>